<template>
  <div>
    
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
     <el-table-column prop="name" label="序号" width="60">
          <template slot-scope="scope">{{scope.$index+1}}</template>
        </el-table-column>
      <el-table-column prop="userInfo.userNick" label="ID" width="60"> </el-table-column>
      <el-table-column prop="title" label="标题">
        <template slot-scope="scope">
          <div>
            <div>回答：
            <span v-for="(item,index) in scope.row.contentItemList" :key="index">{{ item.content}}</span>
             
            </div>
            <div>
              <img v-for="(item,index) in scope.row.contentItemList"  :src="item.imageUrl" :key="index" @click="showImage(item.imageUrl)" style="margin-right:5px;width:70px;height:80px"/>
            </div>
            <div class="colorOne">
             问题：{{scope.row.problem.title}}
            </div>
            <el-row>
              <el-col :span="12">{{timeFun(scope.row.problem.created_at)}}</el-col>
              <el-col :span="3" class="colorOne">转发：{{scope.row.shares}}</el-col>
              <el-col :span="3" class="colorOne">喜欢：{{scope.row.stars}}</el-col>
              <el-col :span="3" class="colorOne">评论：{{scope.row.problem.reply_count}}</el-col>
              <el-col :span="3" class="colorOne">点击量：{{scope.row.pageView}}</el-col>
            </el-row>
          </div>
        </template>
      </el-table-column>
     
     
           
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <span style="color:#333" v-if="scope.row.status == 0" type="info">未审核</span>
          <span style="color:#67c23a" v-if="scope.row.status == 1"  type="success">通过</span>
          <span style="color:#f56c6c" v-if="scope.row.status == 2"  type="danger">删除</span>
        </template>
        
      </el-table-column>
      
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <div>
            <el-button v-if="scope.row.status <1 && userRole.PB_RP_1101002" type="success" class="addBtn" @click="passFun(scope.row.id)">通过</el-button>
            <el-button v-if="scope.row.status !=2 && userRole.PB_RP_1101002" class="addBtn" type="danger"  @click="deletData(scope.row.id)"> 删除</el-button>
            <el-button v-if="scope.row.status ==2 && userRole.PB_RP_1101002" type="success" class="addBtn" @click="passFun(scoperow.id)">恢复</el-button>
            <el-button class="addBtn" @click="eidtNumber(scope.row)" v-if="userRole.PB_RP_1101001">修改数量</el-button>
            
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="imgstuts">
      <img width="100%" :src="titleImgurl" alt="">
    </el-dialog>
    <el-dialog title="修改数量" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="点赞数" prop="stars">
            <el-input v-model="ruleForm2.stars" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="点击量" prop="page_view">
            <el-input  v-model="ruleForm2.page_view" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editNumberFun">确 定</el-button>
      </span>
    </el-dialog>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import getTime from '@/Http/getTime'
   import Http from '@/Http/Http'
  export default {
    data() {
       var stars = (rule, value, callback) => {
      if (value === '') {
       callback(new Error('请输入点赞数'));
      } else if (isNaN(value)){
         callback(new Error('请输入数字'));
      } else  {
        callback();
      }
    };
    var page_view = (rule, value, callback) => {
      
      if (value === '') {
        callback(new Error('请输入点击量'));
      }  else if (isNaN(value)){
         callback(new Error('请输入数字'));
      } else {
        callback();
      }
    };
      return {
        userRole:JSON.parse(sessionStorage.getItem('userSolt')),
        imgstuts:false,
        titleImgurl:'',
        dialogVisible:false,
        tableData: [],
        total:0,
        currentPage4: 1,//分野
        pageIndex:1,
        pageSize:10,
        id:0,
        ruleForm2: {
          favorites: '', //收藏
          shares: '', //转发：
          page_view:0, //点几量
          stars: 0//点赞
        },
        rules2: {
          stars: [
            { validator: stars, trigger: 'blur' }
          ],
          page_view: [
            { validator: page_view, trigger: 'blur' }
          ],
        }
      }
    },
    props:['navStatus'],
    created() {
      this.getlist()
    },
    methods: {
      getStatus(row) {
        if (row.status==0) {
          return '未审核'
        } else if (row.status == 1) {
          return '审核通过'
        } else if (row.status == 2 ) {
          return '审核不通过'
        }
      },
       getlist() {
        const obj = {
          "pageIndex":this.pageIndex,
          "pageSize":this.pageSize,
        }
        if( this.navStatus > -1 ){
          obj.status = this.navStatus
        }
        Http.getReplylist(obj)
        .then( res => {
          this.tableData = res.data.data.rows;
          this.total = res.data.data.total;
          this.dataViedo='';
          this.editStatus = false
        })
        .catch( error => {
          
        })
      },
       //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.getlist()
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getlist()
      },
      
      timeFun(val) {
        return getTime(val)
      },
     
     passFun(id) {
        Http.replyUpdateStatus({
          "id":id,
          "status":1
        })
        .then( res => {
          if( res.data.code == 200 ){
            this.$message.success('审核成功')
            this.getlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
            setTimeout(()=>{
              this.$router.push('/')
            },2000)
          } else (
            this.$message.error(res.data.message)
          )
        })
        .catch( error => {
          this.$message.error('服务器请求失败')
        })
      },
      
      eidtNumber(row){
        this.dialogVisible = true;
        this.id=row.id;
        this.ruleForm2.page_view = row.pageView?row.pageView:0;
        this.ruleForm2.stars = row.stars?row.stars:0
      },
      editNumberFun(){
        Http.editreplyNumber({
          "id":this.id,
           "page_view":this.ruleForm2.page_view, //点几量
          "stars": this.ruleForm2.stars//点赞
        })
        .then(res => {
            if(res.data.code == 200 ) { 
              this.$message.success('数据修改成功')
              this.dialogVisible = false
              this.$emit('list')
            }
          })
          .catch(error=> {
            this.$message.error('服务器请求失败')
          });
      },
      deletData(id) {
        Http.replyUpdateStatus({
          "id":id,
          "status":2
        })
        .then( res => {
          if( res.data.code == 200 ){
            this.$message.success('审核成功')
            this.getlist()
          } else if(res.data.code == -1003) {
            this.$message.error(`请求失败原因：${res.data.message}`)
            setTimeout(()=>{
              this.$router.push('/')
            },2000)
          } else (
            this.$message.error(res.data.message)
          )
        })
        .catch( error => {
          this.$message.error('服务器请求失败')
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      editNumber(){
      },
      //导出
      exportXlxs() {
      },
       //搜索
      sheachFun(val){
        
      },
      //选择 推荐
      handleSelectionChange(val) {
        this.checkFun(val)
      },
      checkFun(val) {
        this.$emit('checkFun',val)
      },
      //图片放大
      showImage(row){
        
        this.titleImgurl = row
        this.imgstuts = true
      }
    }
  }
</script>